<h2>个人资料</h2>
<nz-divider></nz-divider>

<table style="margin-left: 60px;">
    <tr>
        <td>姓名：</td>
        <td>{{ name }}</td>
    </tr>
    <tr>
        <td>学号：</td>
        <td>{{ username }}</td>
    </tr>
    <tr>
        <td>性别：</td>
        <td>{{ sex }}</td>
    </tr>
    <tr>
        <td>班级：</td>
        <td>{{ grade }}</td>
    </tr>
    <tr>
        <td>方向：</td>
        <td>
            <span *ngIf="directionId === 1">web前端</span>
            <span *ngIf="directionId === 2">web后端</span>
            <span *ngIf="directionId === 3">UI设计</span>
            <span *ngIf="directionId === 4">人工智能</span>
            <span *ngIf="directionId === 5">大数据</span>
        </td>
    </tr>
    <tr>
        <td>邮箱：</td>
        <td>{{ email }}</td>
    </tr>
    <tr>
        <td>qq：</td>
        <td>{{ qq }}</td>
    </tr>
    <tr>
        <td>微信号：</td>
        <td>{{ weChat }}</td>
    </tr>
    <tr>
        <td>联系方式：</td>
        <td>{{ phoneNumber }}</td>
    </tr>
    <!-- <tr>
    <td>博客：</td>
    <td>{{personalData.blog}}</td>
  </tr>
  <tr>
    <td>码云：</td>
    <td>{{personalData.gitee}}</td>
  </tr>
  <tr>
    <td>gitHub：</td>
    <td>{{personalData.github}}</td>
  </tr> -->
    <tr>
        <td>照片：</td>
        <td><img [src]="memberImgUrl + image" alt="" class="img" zoom /></td>
    </tr>
</table>

<div style="text-align:center">
    <button nz-button nzType="dashed" (click)="reset()">修改资料</button>
</div>

<div class="reset" id="reset" style="display:none">
    <div style="min-width:600px">
        <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
            <div class="resetTitle">修改信息</div>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber" nzRequired>联系电话</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['phoneNumber']">
                    <input formControlName="phoneNumber" id="phoneNumber" nz-input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
                    <nz-form-explain *ngIf="
              validateForm.get('phoneNumber')?.dirty &&
              validateForm.get('phoneNumber')?.errors
            ">
                        <ng-container *ngIf="validateForm.get('phoneNumber')?.hasError('pattern')">
                            无效的手机号
                        </ng-container>
                        <ng-container *ngIf="validateForm.get('phoneNumber')?.hasError('required')">
                            请输入您的手机号！
                        </ng-container>
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">E-mail</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <input nz-input formControlName="email" id="email" />
                    <nz-form-explain *ngIf="
              validateForm.get('email')?.dirty &&
              validateForm.get('email')?.errors
            ">
                        <ng-container *ngIf="validateForm.get('email')?.hasError('email')">
                            输入无效电子邮件！
                        </ng-container>
                        <ng-container *ngIf="validateForm.get('email')?.hasError('required')">
                            请输入您的电子邮件！
                        </ng-container>
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="qq" nzRequired="false">QQ</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <input nz-input id="QQ" formControlName="qq" oninput="value=value.replace(/[^\d]/g,'')" />
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="weChat" nzRequired="true">微信号</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <input nz-input id="Wechat" formControlName="weChat" />
                    <nz-form-explain *ngIf="
              validateForm.get('weChat')?.dirty &&
              validateForm.get('weChat')?.errors
            ">
                        <ng-container *ngIf="validateForm.get('weChat')?.hasError('pattern')">
                            输入无效的微信号！
                        </ng-container>
                        <ng-container *ngIf="validateForm.get('weChat')?.hasError('required')">
                            请输入您的微信！
                        </ng-container>
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item nz-row style="margin-bottom:8px;    text-align: center;">
                <nz-form-control [nzSpan]="14" [nzOffset]="6">
                    <span style="display: flex;">
            <div>
              <button
                nz-button
                nzType="primary"
                style="width: 100px;margin: 0px 10px;"
              >
                保存
              </button>
            </div>
            <div (click)="cancel()" class="btn">取消</div>
          </span>
                </nz-form-control>
            </nz-form-item>
        </form>
    </div>
</div>